//项目一览
<template>
  <div class="flex-1 flex-ver">
    <div class="mb8">
      <search @clearSearch='clearSearch' :status='true'>
        <el-form label-width='93px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="项目名称">
            <el-input size="medium" clearable v-model="pageparm.name" placeholder="请输入项目名称搜索"/>
          </el-form-item> 
          <el-form-item label="负责人姓名">
            <inputSearch ref="search_e" placeholder="请输入负责人姓名搜索" @onChange='searchChane($event,"leader_id")'  />
          </el-form-item> 
          <el-form-item label="负责人类型">
            <el-select size="medium" v-model="pageparm.leader_type" clearable @change='searchChane($event,"leader_type")' placeholder="请选择负责人类型搜索" >
              <el-option
                v-for="item in firstType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
          </el-form-item> 
          <el-form-item label="科室" v-if="adminShow">
            <inputSearch ref="search_d" type='departments' @onChange='searchChane($event,"departments_id")'  />
          </el-form-item>
          <el-form-item label="项目级别">
            <el-select size="medium" v-model="pageparm.project_level" clearable @change='searchChane($event,"project_level")'  placeholder="请选择项目级别" >
              <el-option
                v-for="item in projectLevel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="pageparm.start_time"
              type="daterange"
              range-separator="至"
              start-placeholder="时间范围"
              end-placeholder="时间范围"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="searchChane($event,'start_time')">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="终止日期">
            <el-date-picker
              v-model="pageparm.end_time"
              type="daterange"
              range-separator="至"
              start-placeholder="时间范围"
              end-placeholder="时间范围"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="searchChane($event,'end_time')">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="审核类型">
            <el-select size="medium" clearable v-model="pageparm.review_type" placeholder="请选择审核类型搜索" @change='searchChane($event,"review_type")'>
              <el-option
                v-for="item in reviewType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select size="medium" clearable v-model="pageparm.review_status" placeholder="请选择审核状态搜索" @change='searchChane($event,"review_status")'>
              <el-option
                v-for="item in reviewStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template slot="footer" class="flex">
          <el-button class="mr8" size="medium" type="primary" @click="handle(null,{},3)">新增纵向项目</el-button>
          <exportExcel :apiFn='Apiprojects'  :self='true' :dataFn='dataFn' name='纵向项目列表' />
        </template>
      </search>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="100%" size="medium" 
      border 
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange"
      @row-click='viewDetails'>  
      <el-table-column
        align="center"
        v-for="(item,i) in headerList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label + (item.unit || '')"
        :width="item.width"
        :fixed="i === 0 ? true: false"
        show-overflow-tooltip
        :sortable="item.noSort?false:'custom'">
        <template slot-scope="scope">
          <template v-if="item.prop === 'departments_id'">
            {{ scope.row.department?scope.row.department.name:'' }}
          </template>
          <template v-else-if="item.prop === 'leader_id'">
            {{ scope.row.leader_info?scope.row.leader_info.name:''}}
          </template>
          <template v-else-if="item.prop === 'complete_id'">
            {{objToStr(scope.row.complete_name)}}
          </template>
          <template v-else-if="item.prop === 'review_status'">
            <span v-if="scope.row.review.review_comment" class="c-red">{{scope.row.status}}：{{scope.row.review.review_comment}}</span>
            <span v-else>{{scope.row.status}}</span>
          </template>
          <template v-else-if="item.prop === 'leader_type'">
            {{ echo(scope.row.leader_type,firstType) }}
          </template>
          <template v-else-if="item.prop === 'project_level'">
            {{ echo(scope.row.project_level,projectLevel) }}
          </template>
          <template v-else>
           {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="140">
        <div class="tx-r" slot-scope="scope">
          <el-tooltip  effect="dark" content="修改信息" placement="bottom-end">
            <el-button v-if="scope.row.edit" size="small" @click.stop="handle(scope.$index, scope.row,2)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="删除" placement="bottom-end">
            <el-button v-if="scope.row.delete" size="small" type="danger" @click.stop="deleteUser(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="添加项目成员" placement="bottom-end">
            <el-button v-if="scope.row.add_member" size="small" type="primary" @click.stop="goUserInfo(scope.row)"  icon="el-icon-user" circle></el-button>
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <portraitDialog ref="portraitDialog" :dialogTitle='dialogTitle' :editHeaderList='editHeaderList' :editForm='editForm' :firstType='firstType' :projectLevel='projectLevel' />

    <!-- 审核 -->
    <examine ref="examine" @submit='examineSubmit' :item='examine_item' />   
    <!-- 详情 -->
    <detail-info :info='details' ref="detail"  />
  </div>
</template>

<script>

import {
    Apiprojects,
    ApiprojectsDel,
    ApiprojectsCheck,
    ApiupLoadFiles,
} from '@/api'
import {reviewStatus,firstType,projectLevel,reviewType} from "@/assets/js"
import { debounce,adminShow,objToStr } from "@/utils/index";
import {headerList,dataFn,editForm} from '../js/portrait'
import detailInfo from '../components/details.vue'
import portraitDialog from './portraitDialog.vue'

export default {
  name: 'project_personalPortrait_glance',
  components:{
    detailInfo,
    portraitDialog
  },
  computed:{
    editHeaderList(){
      let list = headerList.filter(item=>item.prop !== 'review_status')
      return list.sort((a,b) => b.required - a.required)
    }
  },
  data(){
    return{
      objToStr,
      Apiprojects,
      dataFn,
      adminShow: adminShow(),
      reviewStatus,
      reviewType,
      firstType,
      projectLevel,
      tableData:[], 
      editForm,  //修改或者查看详情

      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null, 
        sort_order: 'desc' ,
      },
      tableLoading: false,

      btnLoading: false,

      headerList,

      examine_id: null,  //审核id
      examine_item:{
        view: false
      },

      details:{
        review:{}
      },

      dialogTitle: '',
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
    uploadFiles: debounce(function (url,name){
      ApiupLoadFiles(url).then(res => {
          let a = document.createElement("a")
          a.href = URL.createObjectURL(res)
          a.download = name
          a.click()
          URL.revokeObjectURL(a.href)
      })
    },500,true),
    viewDetails(val){
      this.details = val
      this.$refs.detail.showInfo = true
    },
    goUserInfo(value){
      sessionStorage.setItem('portraitName',value.name)
      this.$router.push('/project/portrait_members?id=' + value.id)
    },
    //审核
    examineSubmit(options){
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      options.id = this.examine_id
      ApiprojectsCheck(options,options.id).then(res => {
        this.getList()
      }).catch(()=>{
        this.$message.error('服务器错误，请重新提交');   
      }).finally(()=>{
        loading.close()
      })
    },
    examine_btns(item,i){
      this.examine_id = item.id
      if(i > 1){
        this.examine_item.review_status = item.review.review_status
        this.examine_item.review_comment = item.review.review_comment
        this.examine_item.view = true
      }else{
        this.examine_item.view = false
      }
      this.$refs.examine.examineShow = true

    },
    echo(i,arr){
      let label
      for (const item of arr) {
        if(item.value === i){
          label = item.label
          break;
        }
      }
      return label
    },
    tableSortChange(column){
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList()
    },
    //搜索
    clearSearch(){
      this.$refs.search_e.clear()
      if(this.adminShow)this.$refs.search_d.clear()
    },
    searchChane(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },
    //分页
    callFather(pageparm){
      this.pageparm.page = pageparm.page
      this.pageparm.perPage = pageparm.perPage
      this.getList()
    },
    getList(){
      this.tableLoading = true
      Apiprojects(this.pageparm).then(({data,page}) => {
        this.tableData = data || []
        this.pageparm.total = page.total
        this.tableLoading = false
      }).catch(()=>{
        this.tableLoading = false
      })
    },
    handle(index,value,i){
      for (const key in this.editForm) {
        this.editForm[key] = value[key]
      }
      this.editForm.files = value.files || {}
      this.$refs.portraitDialog.editFormVisible = true
      this.dialogTitle = '新增纵向项目'
      if(i == 2){
        this.dialogTitle = '编辑纵向项目'
      }
    },
    deleteUser(index,value){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          ApiprojectsDel(value.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }).finally(()=>{
            loading.close()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  },

}
</script>
